<template>
  <a-space direction="vertical" fill size="large">
    <div></div>
    <a-row justify="space-around">
      <a-col :span="23">
        <div class="content">
          <div class="table">
            <a-table :columns="columns" :data="data" :pagination="false" :bordered="false" row-key="uid">
              <template #status="{ record }">
                <a-tag color="green" size="large" v-if="record.status == 2">
                  <template #icon>
                    <icon-check-circle />
                  </template>
                  充足
                </a-tag>
                <a-tag color="orangered" size="large" v-if="record.status == 1">
                  <template #icon>
                    <icon-exclamation-circle />
                  </template>
                  补充
                </a-tag>
                <a-tag color="red" size="large" v-if="record.status == -1">
                  <template #icon>
                    <icon-close-circle />
                  </template>
                  不足
                </a-tag>
              </template>
            </a-table>
          </div>
          <div class="tableBottom">
            <a-pagination :total="queryPage.total" @change="updatePageData" @page-size-change="changePageSize" show-total
              show-jumper show-page-size />
          </div>
        </div>
      </a-col>
    </a-row>
  </a-space>
</template>
<script setup>
import { reactive } from 'vue';
import { post } from "@/service/baseService.js"
import { Notification } from '@arco-design/web-vue';
const queryPage = reactive({
  page: 1,
  page_size: 10,
  total: 50,
  start: 1,
  end: 11
})
const columns = [
  {
    title: '物品名称',
    dataIndex: 'goods_name',
    align: 'center'
  },
  {
    title: '当前库存',
    dataIndex: 'count',
    align: 'center'
  },
  {
    title: '物品单位',
    dataIndex: 'unit',
    align: "center"
  },
  {
    title: '警戒库存',
    dataIndex: 'safe_number',
    align: 'center'
  },
  {
    title: "状态",
    slotName: "status",
    align: 'center'
  },
  {
    title: "备注",
    dataIndex: 'description',
    ellipsis: true,
    tooltip: true
  }
];
var data = reactive([]);
function updatePageData(page) {
  queryPage.page = page
  cacularQuery()
}
function cacularQuery() {
  queryPage.start = ((queryPage.page - 1) * queryPage.page_size) + 1
  queryPage.end = queryPage.start + queryPage.page_size
  initPageData()
}
function changePageSize(size) {
  queryPage.page_size = size
  cacularQuery()
}
function initPageData() {
  post("manage/store/notes/page", queryPage).then((res) => {
    if (res.data.code == 200) {
      queryPage.total = res.data.data.total
      queryPage.start = res.data.data.start
      queryPage.page = res.data.data.page
      queryPage.page_size = res.data.data.page_size
      data = res.data.data.list
    } else {
      Notification.error({
        title: '提示',
        content: res.data.message,
      })
    }
  }).catch((res) => {
    // console.log(res);
    Notification.error({
      title: '错误提示',
      content: "网络或服务器异常！",
    })
  })
}
initPageData()
</script>
<style scoped>
.content {
  height: 85vh;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.table {
  height: 78vh;
  width: 100%;
  /* background-color: blueviolet; */

}

.tableBottom {
  height: 7vh;
  width: 98%;
  /* background-color: antiquewhite; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}</style>